﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Survey.aspx.cs" Inherits="Survey" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Survey of Life Principles</title>
    <style type="text/css">
        body
        {
            background-color: #D3E2F8;
            font-family: Arial,Verdana,Helvetica,sans-serif;
            font-size: 16px;
            line-height: 1.5;
            margin: 0;
            padding: 0;
        }
        .wrapper
        {
            margin: auto;
            width: 85%;
            background: #FFF;
            border: 1px solid #3C6090;
            padding: 12px 10px 10px;
        }
        .part
        {
            width: 100%;
            border: 1px solid #3C6090;
            background-color: #CCFF99;
        }
        .part .title
        {
            margin: 0;
            background-color: #99CC99;
            font-size: large;
            font-weight: bold;
            line-height: normal;
            padding: 5px 10px;
            text-transform: uppercase;
        }
        .part_des
        {
            border: 1px solid #999999;
            margin: 5px;
            padding: 5px 20px;
            font-size: small;
            font-weight: bold;
            line-height: 1.4;
            margin-bottom: 5px;
            text-decoration: none;
        }
        div.mark_table table
        {
            text-align: center;
            border-collapse: collapse;
            margin: auto;
        }
        div.mark_table table td, div.mark_table th
        {
            border: 1px solid black;
            padding: 3px;
        }
        div.mark_table, div.que_table
        {
            border: 1px solid #999999;
            margin: 5px;
            margin: 5px;
            padding: 5px 20px;
        }
        div.que_table table
        {
            width: 100%;
            border-collapse: collapse;
        }
        .matrixAltRow
        {
            background-color: #BBEE88;
        }
        .matrixRow
        {
            background-color: #CCFF99;
        }
        .nav
        {
            font-size: medium;
            text-align: right;
            margin-right: 20px;
            word-spacing: 20px;
        }
        table
        {
            text-align: center;
        }
        tr
        {
            height: 40px;
        }
        div.que_table td:first-child
        {
            text-align: left;
        }
        tr.matrixAltRow .selected
        {
            background: transparent url(imgs/s2.jpg) center no-repeat;
        }
        tr.matrixAltRow .unselected
        {
            background: url(imgs/us2.jpg) center no-repeat;
        }
        tr.matrixRow .selected
        {
            background: url(imgs/s1.jpg) center no-repeat;
        }
        tr.matrixRow .unselected
        {
            background: url(imgs/us1.jpg) center no-repeat;
        }
    </style>

    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            //alternative strip
            $("div.que_table table").each(function() {
                $(this).find("tr:even").addClass("matrixRow");
                $(this).find("tr:odd").addClass("matrixAltRow");
            });
            //pointer
//            $("td:has(input:radio)").each(function() {
//                $(this).attr('class', 'unselected');
//                $(this).css('cursor', 'pointer');
//            });
            //hide radios
//            $('td>input:radio').each(function() {
//                $(this).css('visibility', 'hidden');
//            });
            //click radio
            $("td:has(input:radio)").click(function() {
                $(this).find('input:radio')[0].checked = true;
                //setRadioImages();
            });

            function setRadioImages() {
                $('td>input:radio').each(function() {
                    if (this.checked) {
                        $(this.parentNode).attr('class', 'selected');
                    }
                    else {
                        $(this.parentNode).attr('class', 'unselected');
                    }
                });
            }
            //init
            //setRadioImages();

            var pagenum = $("div[@page]").size();
            var next = $("#next");
            var prev = $("#prev");
            var submit = $("#submit_btn");
            var curpage = 1;
            var curpart = 1;
            function showcurrent() {
                if (curpage > pagenum)
                    curpage = pagenum;
                else if (curpage < 1)
                    curpage = 1;
                $("div[@page]").css("display", "none");
                var newpart = $("div[page=" + curpage + "]")
                    .css("display", "")
                    .attr("part");
                if (curpart != newpart) {
                    //alert('You are working on Section ' + newpart);
                    curpart = newpart;
                    //if (curpart == 1)
                    //  alert('aaa');
                    if (curpart == 2)
                        alert('You are now working on section 2. : Using the following scale, indicate the extent that you feel pressured to hold this principle. The following are common sources of pressure:\n•	Other people (e.g., family members, your partner)\n•	Groups (e.g., religious groups, peer groups, organizations)\n•	Media (e.g., advertisements)\n•	Other sources of pressure (e.g., what society expects from you).');
                    if (curpart == 3)
                        alert('Well done, you have finished section 2. Just one more section to go. Please determine whether or not you wanted to put the principle into play. That is , did you want to act according to the principle. If your anwwer is no, then click “not applicable” and move on to the next question. If your answer is yes, then rate how successful you were at putting the principle into play.');                    
                }

                next.css("display", "");
                prev.css("display", "");
                submit.css("display", "none");
                if (curpage == 1)
                    prev.css("display", "none");
                if (curpage == pagenum) {
                    next.css("display", "none");
                    submit.css("display", "");
                }
            }
            showcurrent();

            next.click(function() {
                if (validation()) {
                    curpage++;
                    showcurrent();
                } else
                    alert('Please finish this page');
            })

            prev.click(function() {
                curpage--;
                showcurrent();
            })

            function validation() {
                var flag = true;
                $("div[page=" + curpage + "] tr").each(function() {
                    var radios = $(this).find("input:radio")
                    if (radios.size() == 0)
                        return;
                    var v = false;
                    radios.each(function() {
                        if (this.checked)
                            v = true;
                    })
                    if (!v)
                        flag = false;
                })
                return flag;
            }

            function validationAll() {
                var flag = true;
                $("div[@page] tr").each(function() {
                    var radios = $(this).find("input:radio")
                    if (radios.size() == 0)
                        return;
                    var v = false;
                    radios.each(function() {
                        if (this.checked)
                            v = true;
                    })
                    if (!v)
                        flag = false;
                })
                return flag;
            }

            $("form").submit(function() {
                var v = validationAll();
                if (!v)
                    alert('Please finish this page');
                return v;
            });
        })
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div class="wrapper">
        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
        <div class="nav">
            <a id="prev" href="#">Prev</a> <a id="next" href="#">Next</a>
        </div>
        <div style="text-align: center">
            <asp:Button ID="submit_btn" runat="server" Text="Submit" OnClick="Button1_Click" />
        </div>
    </div>
    </form>
</body>
</html>
